import {
    VuexModule,
    Module,
    Mutation,
    Action,
    getModule
} from 'vuex-module-decorators'
import store from '@/store'

export enum DirectionType {
    forward,
    reverse
}

export interface IAppState {
    appOptions: {
        hideHead: boolean
        showBack: boolean
        title: string
        hideShadow: boolean
        showMenu: boolean
    }
    direction: DirectionType
}

@Module({ dynamic: true, store, name: 'app' })
class App extends VuexModule implements IAppState {
    public appOptions = {
        hideHead: true,
        showBack: false,
        title: '',
        hideShadow: false,
        showMenu: false
    }
    public direction: any = DirectionType.forward

    @Action({ commit: 'TOGGLE_SHADOW' })
    public ToggleShadow(hideShadow: boolean) {
        return hideShadow
    }

    @Mutation
    public TOGGLE_SHADOW(hideShadow: boolean) {
        this.appOptions.hideShadow = hideShadow
    }
    @Action({ commit: 'TOGGLE_HEAD' })
    public ToggleHead(hideHead: boolean) {
        return hideHead
    }

    @Mutation
    public TOGGLE_HEAD(hideHead: boolean) {
        this.appOptions.hideHead = hideHead
    }

    @Action({ commit: 'TOGGLE_Title' })
    public ToggleTitle(title: string) {
        return title
    }

    @Mutation
    public TOGGLE_Title(title: string) {
        this.appOptions.title = title
    }

    @Action({ commit: 'TOGGLE_BACK' })
    public ToggleBack(showBack: boolean) {
        return showBack
    }

    @Mutation
    public TOGGLE_BACK(showBack: boolean) {
        this.appOptions.showBack = showBack || false
    }

    // direction router-view切换的动画方向
    @Action({ commit: 'TOGGLE_DIRECTION' })
    public ToggleDirection(direction: DirectionType) {
        return direction
    }

    @Mutation
    private TOGGLE_DIRECTION(direction: DirectionType) {
        this.direction = direction
    }
}

export const AppModule = getModule(App)
